<template>
    <div class="index">
        <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in images" :key="item">
      <img :src="item" alt="">
    </el-carousel-item>
  </el-carousel>
    <div class="product" style="background:url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.goqoq.com%2Fwp-content%2Fuploads%2F173983047201307111456353896899195662_043.jpg&refer=http%3A%2F%2Fwww.goqoq.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668820799&t=031393e12d18f5b05c37e20b992b552d)no-repeat">
      <h1 style="color:#fff;padding: 20px;">热门商品</h1>
      <el-row :gutter="20" style="width:1400px;margin:0 auto">
        <el-col :span="6" v-for="(product, index) in products" :key="product.id" style="margin-bottom:20px;">
          <el-card :body-style="{ padding: '0px' }">
            <img :src="product.imgPath"
              class="image" @click="goDetail(product.id)" style="width: 80%;margin:0 auto">
            <div style="padding: 14px;">
              <span>{{product.title}}</span>
              <p>{{product.price}}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="product" style="background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.goqoq.com%2Fwp-content%2Fuploads%2F173983047201307111456353896899195662_043.jpg&refer=http%3A%2F%2Fwww.goqoq.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668820799&t=031393e12d18f5b05c37e20b992b552d)no-repeat">
      <h1 style="color:#fff;padding: 20px;">最新上架</h1>
      <el-row :gutter="20" style="width:1400px;margin:0 auto">
        <el-col :span="6" v-for="(product, index) in products" :key="product.id" style="margin-bottom:20px;">
          <el-card :body-style="{ padding: '0px' }">
            <img :src="product.imgPath"
              class="image" @click="goDetail(product.id)" style="width: 80%;margin:0 auto">
            <div style="padding: 14px;">
              <span>{{product.title}}</span>
              <p>{{product.price}}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="product" style="background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.goqoq.com%2Fwp-content%2Fuploads%2F173983047201307111456353896899195662_043.jpg&refer=http%3A%2F%2Fwww.goqoq.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668820799&t=031393e12d18f5b05c37e20b992b552d)no-repeat">
      <h1 style="color:#fff;padding: 20px;">最新求购</h1>
      <el-row :gutter="20" style="width:1400px;margin:0 auto">
        <el-col :span="6" v-for="(product, index) in products" :key="product.id" style="margin-bottom:20px;">
          <el-card :body-style="{ padding: '0px' }">
            <img :src="product.imgPath"
              class="image" @click="goDetail(product.id)" style="width: 80%;margin:0 auto">
            <div style="padding: 14px;">
              <span>{{product.title}}</span>
              <p>{{product.price}}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>

export default {
    name: 'IndexView',
   data(){
    return {
        images:['/loop1.png','/loop2.png','/loop3.png','/loop4.png','/loop5.png'],
        products:[]
    }
   },
   created(){
    this.axios.get('/api/index')
    .then(res => {
      this.products = res.data.data
    })
  },
  methods:{
      goDetail(pId){
        this.$router.push('/detail?productId=' + pId)
      }
   }
}
</script>
<style lang="scss" scoped>
    ::v-deep .el-carousel__container{
        height: 400px;
    }
    ::v-deep .el-carousel__indicator--horizontal{
        position: relative;
        left: 30%;
    }
 .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  a{
    text-decoration: none;
    color: #000;
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
</style>